import React from 'react';
import { Component } from 'react';
import { Link } from 'react-router'
import { NavBar, SearchBar, WhiteSpace, List  } from 'antd-mobile';

import { url } from 'root_path/util/url.js';
import CarouselBlock from 'root_path/pages/index/carousel/Carousel.jsx';

require('./Index.less');

export default class IndexPage extends Component {
    constructor() {
        super();
        this.state = {
            selectedTab: 'redTab'
        }
    }
   
    render() {
        const Item = List.Item;
        const shops = [
            {name:"黄焖鸡", logoSrc:"client/images/shop_logo.png", userScore: 5.0},
            {name:"盖浇饭", logoSrc:"client/images/shop_logo.png", userScore: 2.5},
            {name:"元宵", logoSrc:"client/images/shop_logo.png", userScore: 1.5},
            {name:"水饺", logoSrc:"client/images/shop_logo.png", userScore: 4.5},
            {name:"蛋炒饭", logoSrc:"client/images/shop_logo.png", userScore: 4.9},
            {name:"美亦粥", logoSrc:"client/images/shop_logo.png", userScore: 2.5},
            {name:"凉皮", logoSrc:"client/images/shop_logo.png", userScore: 4.5},
            {name:"肯德基", logoSrc:"client/images/shop_logo.png", userScore: 1.5}
          ];
        return (
            <div className="wrapper">
                <NavBar mode="dark"></NavBar>
                <SearchBar placeholder="搜索商家、商品名称" />
                <CarouselBlock />
                <List className="my-list">
                {
                    shops.map((shop)=>{
                        return  <Item>
                                <div className="shopItem_container" >
                                    <section className="shop_head">
                                        <Link to={url.shop}><img src={shop.logoSrc} style={{width: "8rem", height: "8rem"}}/></Link>
                                    </section>
                                    <section className="shop_content">
                                        <section className="medium">{shop.name}</section>
                                        <section className="small">{shop.userScore}</section>
                                        <section className="small">￥20起送</section>
                                        <section className="small">新用户下单减17.7元</section>
                                        <section className="small">满40减20</section>
                                    </section>
                                </div>
                            </Item>
                    })
                }
                </List>
            </div>
        );
    }
}